<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100%;
        }

        .box .nav {
            width: 1400px;
            height: 50px;
            background-color: #0297cf;
            margin: auto;
            position: relative;
        }

        .box .nav h2 {
            color: aliceblue;
            line-height: 50px;
            margin-left: 30px;
        }

        .box .nav .icon-fenlei {
            position: absolute;
            top: 15px;
            left: 250px;
            font-size: 20px;
            color: white;
        }

        .box .nav .navyou {
            position: absolute;
            top: 15px;
            right: 10px;
            color: aliceblue;
        }

        .box .nav .navyou span {
            margin-left: 10px;
        }

        .box .banner {
            width: 1400px;
            height: 900px;
            /* background-color: pink; */
            margin: auto;
        }

        .box .banner .menu {
            width: 200px;
            height: 900px;
            background-color: #2d3e50;
            float: left;
        }

        .box .banner .menu ul li {
            box-sizing: border-box;
            list-style: none;
            display: inline-block;
            width: 400px;
            height: 45px;
            /* background-color: #ccc; */
            line-height: 45px;
            color: white;


        }

        .box .banner .menu ul li span {
            font-size: 20px;
        }

        .box .banner .menu ul li .icon-xialajiantouxiao {
            margin-left: 80px;
        }

        .box .banner .huanying {
            width: 1200px;
            height: 50px;
            /* background-color: palegoldenrod; */
            float: left;
        }

        .box .banner .huanying span {
            margin-left: 10px;
            line-height: 50px;

        }

        .box .banner .huanying .yeqian {
            margin-left: 1030px;
        }

        .box .banner .kuang {
            width: 1200px;
            height: 100px;
            /* background-color: palevioletred; */
            float: left;
        }

        .box .banner .kuang div {
            width: 280px;
            height: 90px;
            background-color: #0196c0;
            overflow: hidden;
            position: relative;
            float: left;
            margin-left: 15px;
        }

        .box .banner .kuang div .yi {
            color: aliceblue;
            margin-top: 10px;
            margin-left: 20px;
        }

        .box .banner .kuang div .er {
            color: aliceblue;
            margin-top: 10px;
            margin-left: 20px;
            font-size: 30px;
        }

        .box .banner .kuang div .san {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-color: #33a7cc;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .box .banner .kuang .two {
            background-color: #0099cb;
        }

        .box .banner .kuang .two .san {
            background-color: #23a6d0;
        }

        .box .banner .kuang .three {
            background-color: #14c376;
        }

        .box .banner .kuang .three .san {
            background-color: #40ce92;
        }

        .box .banner .kuang .four {
            background-color: #8f9080;
        }

        .box .banner .kuang .four .san {
            background-color: #9a9f89;
        }

        .box .banner .bar {
            width: 575px;
            height: 400px;
            /* background-color: palegoldenrod; */
            float: left;
            margin-left: 15px;
        }

        .box .banner .line {
            width: 575px;
            height: 400px;
            /* background-color: paleturquoise; */
            float: left;
            margin-left: 15px;
        }

        .box .banner .biao {
            width: 1165px;
            height: 330px;
            background-color: papayawhip;
            float: left;
            margin-left: 15px;
            background-color: #ffffff;
            margin-top: 20px;
        }

        .box .banner .biao table tr th {
            width: 200px;

        }

        tbody {
            width: 200px;
            height: 50px;
            text-align: center;
        }

        tbody td {
            width: 200px;
            height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <h2>后台管理系统</h2><span class="iconfont icon-fenlei"></span>
            <div class="navyou">
                <span>当前用户: bootstrap</span>
                <span>中文角色: 管理员</span>
            </div>
        </div>
        <div class="banner">
            <div class="menu">
                <ul>
                    <li><span class="iconfont icon-diqiu"></span>后台首页<span
                            class="iconfont icon-xialajiantouxiao"></span></li>
                    <li><span class="iconfont icon-fanggepailie"></span>设计元素<span
                            class="iconfont icon-xialajiantouxiao"></span></li>

                    <li><span class="iconfont icon-fenlei1"></span>表单元素<span
                            class="iconfont icon-xialajiantouxiao"></span></li>

                    <li><span class="iconfont icon-wode"></span>示例页面<span class="iconfont icon-xialajiantouxiao"></span>
                    </li>

                    <li><span class="iconfont icon-fanggepailie"></span>常用列表<span
                            class="iconfont icon-xialajiantouxiao"></span></li>

                    <li><span class="iconfont icon-linkedin"></span>脚本插件<span
                            class="iconfont icon-xialajiantouxiao"></span></li>

                    <li><span class="iconfont icon-youxiang"></span>统计图表<span
                            class="iconfont icon-xialajiantouxiao"></span></li>
                </ul>
            </div>
            <div class="huanying">
                <span class="iconfont icon-sanjiaoxing_shang"></span><span>欢迎首页</span><span class="yeqian">页签操作</span>
            </div>
            <div class="kuang">
                <div class="one">
                    <p class="yi">今日收入</p>
                    <p class="er">100,000.00</p>
                    <p class="san">$</p>
                </div>
                <div class="two">
                    <p class="yi">昨日收入</p>
                    <p class="er">200,000.00</p>
                    <p class="san">$</p>
                </div>
                <div class="three">
                    <p class="yi">月度累计收入</p>
                    <p class="er">1000,000.00</p>
                    <p class="san">$</p>
                </div>
                <div class="four">
                    <p class="yi">年度累计收入</p>
                    <p class="er">5000,000.00</p>
                    <p class="san">$</p>
                </div>

            </div>
            <div class="bar"></div>
            <div class="line"></div>
            <div class="biao">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>下单日期</th>
                            <th>状态</th>
                            <th>处理情况</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
    <script src="./promise-ajax.js"></script>
</body>

</html>
<script>
    var bar = document.querySelector('.box .banner .bar')
    var o = echarts.init(bar)
    o.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'left',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'line',
                }
            }
        },
        yAxis: {
            type: 'value',//y轴设置
            data: [1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000],
            max: 5000,
            min: 1500,
            splitNumber: 8
        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 15, //柱子的宽度
                showBackground: true,//显示背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
                ,
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2000, 2100, 1900, 5000, 1800, 3000, 2000, 4000, 3800, 2300, 3500, 4000]
            },
            {
                name: '同期每月收入',
                type: 'bar',//'line' , 'bar' , 'pie'
                barWidth: 15,
                data: [3000, 3100, 2900, 3000, 4800, 4000, 3050, 2800, 3900, 3300, 2500, 4560],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: '#c2e7ff', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        lineStyle: { width: 3 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });
    var line = document.querySelector('.box .banner .line')
    var e = echarts.init(line)
    //console.log(line);
    e.setOption({
        title: { //标题
            text: '每年收入走势',
            left: 'left',
        },
        legend: {
            barWidth: 12,
            bottom: 20,
            right: 10,
        },

        xAxis: {
            // // type: 'category',
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'line',
                }
            }
        },
        yAxis: {
            type: 'value',
            data: [20, 30, 40, 50, 60, 70, 80],
            max: 80,
            min: 20,
            splitNumber: 7
        },
        series: [
            {
                name: '每年收入走势',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 70, 60],
                type: 'line',
                smooth: true
            },
            {
                name: '每年同期收入走势',
                data: [40, 45, 50, 43, 45, 60, 65, 50, 58, 40, 70, 60],
                type: 'line',
                smooth: true
            }
        ],

    })
    async function render() {
        var data = await ajax('get', "./data.json", {})
        var datalist = data.list
        var str = datalist.map((item) => {
            return `<tr>
                <td>${item.id}</td>
                <td>${item.number}</td>
                <td>${item.name}</td>
                <td>${item.time}</td>
                <td>${item.zhuangtai}</td>
                <td>${item.chuli}</td>
            </tr>
            `
        }).join('')
        document.querySelector('.biao tbody').innerHTML = str
    }
    render()


</script>